<script setup lang="ts">
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'
const activeIndex = ref(0)
const changeSwiper: UniHelper.SwiperOnChange = (e) => {
  activeIndex.value = e.detail!.current
}
const props = defineProps<{
  list: BannerItem[]
}>()
</script>
<template>
  <view class="index">
    <swiper class="swiper" circular :autoplay="true" @change="changeSwiper">
      <swiper-item v-for="item in list" :key="item.id">
        <image class="image" mode="aspectFill" :src="item.imgUrl" />
      </swiper-item>
    </swiper>
    <view class="indicator">
      <text
        v-for="(item, index) in 2"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.swiper {
  width: 100%;
  height: 280rpx;
}
.image {
  width: 100%;
  height: 100%;
}
.index {
  position: relative;
}
.indicator {
  position: absolute;
  display: flex;
  bottom: 16rpx;
  width: 100%;
  justify-content: center;
  text-align: center;
  .dot {
    width: 30rpx;
    height: 6rpx;
    margin: 0 8rpx;
    border-radius: 6rpx;
    background-color: rgba(255, 255, 255, 0.4);
  }
  .active {
    background-color: #fff;
  }
}
</style>
